<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <script src="./js/echarts/echarts.5.0.0.js"></script>
    <script src="./js/echarts/theme/shine.js"></script>
    <title>ECharts空心饼图案例</title>
</head>
<style>
    #chart-1 {
        width: 400px;
        height: 400px;
        display: inline-block;
    }
</style>
<body>
<div id="chart-1"></div>
</body>
<script>
    echarts.init(document.getElementById("chart-1"), "shine", {renderer: "svg"}).setOption({
        title: [{
            text: 'ECharts空心饼图案例',
        }, {
            text: '累计订单量',
            subtext: 10000,
            x: '50%',
            y: '40%',
            textStyle: {
                fontSize: 14,
                color: '#999'
            },
            subtextStyle: {
                fontSize: 28,
                color: '#333'
            },
            textAlign: 'center'
        }],

        tooltip: {
            backgroundColor: '#fff',
            formatter: function (params) {
                const str = params.seriesName + '<br />' +
                    params.marker + params.data.name + '<br />' +
                    '数量：' + params.data.value + '<br />' +
                    '占比：' + params.data.percent + '%'
                return str
            }
        },
        legend: {
            type: 'scroll', //超出滚动
            orient: 'vertical', // 方向
            height: 250,
            left: '80%',
            top: 'middle',
            textStyle: {
                color: '#8c8c8c'
            }
        },
        series: {
            name: '分类',
            type: 'pie',
            radius: ['45%', '60%'], // 内半径、外半径
            data: [
                {value: 535, name: '一季度', percent: '40'},
                {value: 510, name: '二季度', percent: '10'},
                {value: 634, name: '三季度', percent: '25'},
                {value: 735, name: '四季度', percent: '25'}],
            label: {
                normal: {
                    show: true,
                    position: 'outter',
                    formatter: function (params) {
                        return params.data.name
                    }
                }
            },
            labelLine: {
                normal: {
                    length: 20, // 线段1长度
                    length2: 20,// 线段1长度
                    smooth: true // 平滑
                }
            },
            clockwise: false, // 饼图的扇区是否是顺时针排布, 默认true
            itemStyle: {
                borderWidth: 4,
                borderColor: '#fff'
            }
        }
    })


</script>
</html>
